<template>

    <div class="oo">
       
       <div class="yb">
         <van-icon name="search" />
       </div>
   
    </div>
    <van-tabs v-model:actives="actives" shrink sticky>
  <van-tab title="演出">
    
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item><img src="../assets/sw1.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="../assets/sw2.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="../assets/sw3.jpg" alt=""></van-swipe-item>
    <van-swipe-item><img src="../assets/sw4.jpg" alt=""></van-swipe-item>
  </van-swipe>
  <van-notice-bar
    left-icon="volume-o"
    :text="tex.announcementContent"
  />


   
 <TpCom v-for="good in goods"
        :key="good.id"
        v-bind="good"    
        >
  </TpCom>

    
     </van-tab>
  <van-tab title="周边">
      <div class="lb">
        <img src="../assets/gg.jpg" alt="">
    </div>
    <h2 id="one">热门周边</h2>
    <h2 id="two">HOT MERCHANDIESE</h2>
    <div class="jj">
         <ZhuCom
          v-for="bad in bads"
          :key="bad.id"
          v-bind="bad"
         ></ZhuCom>
    </div>
  </van-tab>
  <van-tab title="众筹">
    <ZhongCh
          v-for="zhong in zhongs"
          :key="zhong.id"
          v-bind="zhong"
    ></ZhongCh>
  </van-tab>
 
</van-tabs>

<div class="bl"></div>
</template>

<script>
import { ref } from 'vue';
import TpCom from "@/components/TpCom.vue"
import ZhuCom from "@/components/ZhuCom.vue"
import PpcCom from "@/components/PpcCom.vue"
import ZhongCh from "@/components/Zhongchou"
import axios from 'axios'

export default {
   components:{
            TpCom, ZhuCom,PpcCom,ZhongCh
        },
  created(){
    axios.get("http://localhost:8087/shows/selectAll").then((res)=>{
      this.goods = res.data.data;
      // console.log(this.goods);
    })
    axios.get("http://localhost:8087/merch/selectAll").then((res)=>{
      this.bads = res.data.data;
      // console.log(res.data.data);
    })
    axios.get("http://localhost:8087/crowdfunding/selectAll").then((res)=>{
      this.zhongs = res.data.data;
      // console.log(res.data.data);
    })
    axios.get("http://localhost:8087/announcement/queryById/0").then((res)=>{
      this.tex = res.data.data;
      // console.log(res.data.data);
    })
  },
  data() {
    return {
      goods:[],
      bads:[],
      zhongs: [],
      tex: "",
    }
  },
   
  setup() {
     const active = ref(0);
    return { active };
    
   
  },
  
  name: 'PpcView'
};

</script>

<style lang="scss" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    
    text-align: center;
   
     img{
      width: 100%;
      margin-top: 2px;
     
  }
  }
.van-tab__panel, .van-tab__panel-wrapper{
  background-color: #fff;
}
   .oo{
       width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
     top: 0;
     z-index: 18;
     background-color: #fff;
     border-bottom: 1px solid #eee;
   }

  
   .yb{
    position: absolute;
    margin-top: 15px;
     right: 10px;
   }
   .zj{
     margin-left: 5%;
     width: 100%;
    
     display: flex;
   }
    .zj p{
      width: 30%;
      line-height: 2px;
      font-size: 15px;
    }
ul{
        display: flex;
        flex-wrap: wrap;
        
        li{
            width:47%;
            flex-grow: 1;
            margin: 5px  3px;
            background-color: #fff;
            border-radius: 10px;
            img{
                width: 100%;
            }
        }

    }
    #one{
      text-align: left;
      margin-left: 4vw;
      margin-top: 5vw;
      font-size: 5vw;
      color: #000;
    }
    #two{
      text-align: left;
      margin-left: 4vw;
      margin-top: 1vw;
      margin-bottom: 4vw;
      font-size: 4vw;
      color: grey;
    }
    .jj{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .lb{
      width: 100%;
      img{
        width: 100%;
      }
    }
    .bl{
      height: 20vw;
    }
::v-deep .van-tab--active{
  font-size: 5vw;
  font-weight: bold;
}
::v-deep .van-tabs__line{
  display: none;
}
</style>